import { useState, useEffect } from "react";
import { myGoodsDetail } from "@/api/modules/goods";
import type { GoodsItemModel } from "@/api/modules/goods";
import { setSku_list, setSpec_list } from "@/views/goods/set_Sku_data";
import type { SkuListItem, SpecListItem } from "@/views/goods/set_Sku_data";
import { useLocation } from "react-router-dom";
import Cempty from "@/components/Cempty";
import "./index.less";
import Ccascader from "@/components/Ccascader";
import Cimage from "@/components/Cimage";
import {
	Carousel,
	Radio,
	Form,
	Button,
	Table,
	Row,
	Col,
	Tooltip,
	Switch,
	Space,
	Tag,
	Modal,
	Input,
	message,
	Popconfirm,
	Card,
	Divider
} from "antd";
import { DoubleRightOutlined } from "@ant-design/icons";
interface GoodsItemTableModel extends GoodsItemModel {
	sku_list?: SkuListItem[];
	spec_list?: SpecListItem[];
}
const goodsDetail = () => {
	const location = useLocation();
	const [goodsId, setGoodsId] = useState<string | null>(null); // 商品ID
	// 商品数据
	const [goodsItem, setGoodsItem] = useState<GoodsItemTableModel>();
	useEffect(() => {
		// 当路由变化时，执行获取商品详情的函数（修改）
		const searchParams = new URLSearchParams(location.search);
		setGoodsId(searchParams.get("goodsId") || null);
		getDetail(searchParams.get("goodsId") || null);
		console.log(searchParams.get("goodsId"), "searchParams.get");
	}, [location]);
	/**
	 * 获取商品详情
	 * @param goodsId 商品ID
	 */
	async function getDetail(goodsId: string | null) {
		if (!goodsId) {
			return;
		}
		const { code, data } = await myGoodsDetail({ goodsId });
		if (code === 0) {
			const newGoodsItem = {
				...data,
				sku_list: setSku_list(data, data.none_sku ? "none" : ""),
				spec_list: setSpec_list(data.skuList, data.none_sku ? "none" : "")
			};
			setGoodsItem(newGoodsItem);
			console.log(newGoodsItem, "newGoodsItem");
		}
	}
	return (
		<>
			{goodsItem && (
				<div className="GoodsDetail wh-full">
					<Row gutter={10} align="middle">
						<Col xs={24} sm={24} md={24} lg={24} xl={10} xxl={10}>
							<Carousel autoplay dots={{ className: "goodsDetail-dots" }}>
								{goodsItem.homeImageIds.map((item, index) => {
									return (
										<div key={index} className="!f-c-c p-10">
											<img className="goodsDetail-content-carouselImg" src={item.url} />
										</div>
									);
								})}
							</Carousel>
						</Col>
						<Col xs={24} sm={24} md={24} lg={24} xl={12} xxl={12}>
							<Card className="GoodsDetail-right" bordered={false}>
								<span className="text-18 font-bold mb-5 label-color">{goodsItem.name || "未命名商品"}</span>
								<span className="text-14 font-bold mb-20" style={{ color: "#F56C6C" }}>
									【 {goodsItem.hot} 】
								</span>
								<span className="mb-20">
									<span className="text-18 font-bold">秒杀价：</span>
									<span className="text-24 font-bold" style={{ color: "#D03050" }}>
										￥{goodsItem.price}
									</span>
									<span className="decoration-line-through ml-5 label-color">￥{goodsItem.oldPrice}</span>
								</span>
								<span className="mb-20">
									<span className="text-18 font-bold">剩余总库存：</span>
									<span className="text-16" style={{ color: "#2080F0" }}>
										{goodsItem.stock_num}
									</span>
								</span>
								<span className="mb-20">
									<span className="text-18 font-bold">商品类别:</span>
									<Ccascader value={goodsItem.parentId} className="!w-200 !ml-10" disabled />
								</span>
								<span className="flex">
									<span className="text-18 font-bold">规格列表：</span>
									{goodsItem.sku_list && goodsItem.sku_list!.length > 0 ? (
										<Space direction="vertical" size="middle" style={{ display: "flex" }}>
											{goodsItem.sku_list.map((item, index) => {
												return (
													<div className="flex items-center label-color" key={index}>
														<Cimage src={item.image} width={50} height={50} />
														<DoubleRightOutlined className="ml-10" />
														<span className="text-16 ml-15">{item.sku_name_arr.toString()}</span>
														<span className="text-16 ml-15">库存: x{item.stock}</span>
														<span className="text-16 ml-15">价格: ￥{item.price}</span>
													</div>
												);
											})}
										</Space>
									) : (
										<span className="ml-10 text-16 label-color">暂无规格</span>
									)}
								</span>
							</Card>
						</Col>
					</Row>
					<Divider className="text-18 font-bold">商品详情</Divider>
					<Row gutter={10}>
						{goodsItem.detailsImageIds && goodsItem.detailsImageIds.length > 0 ? (
							goodsItem.detailsImageIds.map((item, index) => {
								return (
									<Col xs={24} sm={24} md={24} lg={24} xl={12} xxl={12} key={index}>
										<Card className="goods-detail-card" bordered={false}>
											<img className="goodsDetail-detailsImg" src={item.url} />
										</Card>
									</Col>
								);
							})
						) : (
							<Col xs={24} sm={24} md={24} lg={24} xl={12} xxl={12}>
								<span className="text-16 label-color">暂无商品详情图片</span>
							</Col>
						)}
					</Row>
				</div>
			)}
			{!goodsItem && <Cempty />}
		</>
	);
};
export default goodsDetail;
